<template>
  <view class="dropDown">
    <view v-if="isshowUp === '位置'" class="select">
      <view style="height: 100%">
        <view class="title-listH"></view>
        <view class="title-list">
          <view v-for="(item, index) in regionTree" :key="item.id">
            <view class="title-item" @click="regionIndex = index">
              <text v-if="item.id !== ''">{{ item.name }}</text>
              <text v-else class="placeholder-text">请选择</text>
            </view>
          </view>
        </view>
        <view class="degree">
          <view class="price">
            <view v-for="(item, index) in regionTree[regionIndex].list"
              :class="{ active: item.id === regionTree[regionIndex].id }" :key="item.id" @click="regionPrice(item)">{{
                item.label }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="isshowUp === '行业'" class="cetetory">
      <view class="classify">
        <view>
          <view class="left">
            <view v-for="item in industryList" :key="item.id" @click="changeClassfiy(item)"
              :class="industryId == item.id ? 'active' : ''">{{ item.label }}
            </view>
          </view>
          <view class="right">
            <view v-for="item in secondList" :key="item.id" class="second-item">
              <view class="post-name">{{ item.label }}</view>
              <view class="post-num">
                <view v-for="i in item.children" :key="i.id" @click="changePost(i)"
                  :class="activeList.indexOf(i.id) != -1 ? 'active' : 'post'">
                  <text class="label">{{ i.label }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- <view class="c_fixd"></view> -->
      </view>
      <!-- 底部取消确认按钮 -->
      <view class="btn">
        <view class="cancel" @click="handleCancel">取消</view>
        <view class="confirm" @click="handleConfirm">确认</view>
      </view>
    </view>
    <view v-if="isshowUp === '类型'" class="sort">
      <view v-for="item in srotArr" :key="item.value" @click="handleSort(item)">
        <text>{{ item.label }}</text>
        <icon type="success" size="16" color="#55BD76" v-if="sortType === item.value"></icon>
      </view>
      <!-- 底部取消确认按钮 -->
      <view class="btn">
        <view class="cancel" @click="handleCancel">取消</view>
        <view class="confirm" @click="handleConfirm">确认</view>
      </view>
    </view>
    <view v-if="isshowUp === '筛选'" class="select">
      <view>
        <!-- 薪资范围 -->
        <view>
          <view class="titleText">薪资范围</view>
          <view>
            <mySlider :minValue="minValue" :maxValue="maxValue" :step="1" :fillValue="50" inactiveColor="#000"
              @move="move" @down="down" @up="up" />
          </view>
          <view class="slider">
            <view class="sliderLeft">{{ minValue }}</view>
            <view class="sliderRight">{{ maxValue }}</view>
          </view>
          <view class="price">
            <view v-for="(item, index) in priceArr" :key="index" @click="changeSalary(index, item)"
              :class="salary == index ? 'active' : ''">{{ item.label }}</view>
          </view>
        </view>
        <!-- 学历 -->
        <view class="degree">
          <view class="titleText">学历</view>
          <view class="price">
            <view v-for="item in degreeArr" :key="item.dictValue" @click="changePrice(item.dictValue)" :class="
              educationTypes.indexOf(item.dictValue) != -1 ? 'active' : ''
            ">{{ item.dictLabel }}</view>
          </view>
        </view>
        <view class="degree">
          <view class="titleText titleText1">工作经验</view>
          <view class="price">
            <view v-for="(item, index) in workArr" :key="index" @click="changeWork(item, index)"
              :class="work === index ? 'active' : ''">{{ item.label }}</view>
            <!-- <view v-for="item in expensiveArr" :key="item.dictValue" @click="changeEnterprise(item.dictValue)" :class="
                enterpriseScales.indexOf(item.dictValue) != -1 ? 'active' : ''
              ">{{ item.dictLabel }}</view> -->
          </view>
        </view>
        <!-- 底部取消确认按钮 -->
        <view class="btn">
          <view class="cancel" @click="handleCancel">取消</view>
          <view class="confirm" @click="handleConfirm">确认</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getDictType,
  industryAllTree,
  industryTree,
  regionTreeLevel,
} from "@/api/common.js";
import mySlider from "@/components/s-region-slider/s-region-slider.vue";

export default {
  props: {
    isshowUp: String,
  },
  components: {
    mySlider,
  },
  data() {
    return {
      regionIndex: 0,
      //省市
      regionTree: [
        { id: "", name: "", list: [] },
        { id: "", name: "", list: [] },
      ],
      salary: null,
      secondList: [],
      industryId: "",
      startSalary: "",
      endSalary: "",
      industryList: [],
      postList: [],
      activeList: [],
      educationTypes: [],
      enterpriseScales: [],

      work: null,
      workExperiences: {
        startWorkExperience: "",
        endWorkExperience: "",
      },

      // 求职类型 （1=零工、2=兼职，3=全职）
      srotArr: [
        { value: 1, label: "零工兼职" },
        { value: 2, label: "小时工兼职" },
        { value: 3, label: "全职" },
      ],
      sortType: "",
      priceValue: 50,
      priceArr: [
        { value: [null, "3000"], label: "3千以下" },
        { value: ["3000", "5000"], label: "3-5千" },
        { value: ["5000", "8000"], label: "5-8千" },
        { value: ["8000", "12000"], label: "0.8-1.2万" },
        { value: ["12000", "18000"], label: "1.2-1.8万" },
        { value: ["18000", null], label: "1.8万以上" },
      ],
      workArr: [
        { value: [null, "1"], label: "0-1年" },
        { value: ["1", "3"], label: "1-3年" },
        { value: ["3", "5"], label: "3-5年" },
        { value: ["5", "8"], label: "5-8年" },
        { value: ["8", "10"], label: "8-10年" },
        { value: ["10", null], label: "10年以上" },
      ],
      // 滑动条参数
      minValue: 0,
      maxValue: 0,
      // 学历
      degreeArr: [],
    };
  },
  computed: {},
  watch: {},
  onLoad() { },
  onShow() { },
  onReady() { },
  mounted() {
    this.getRegion();
    this.handleIndustry();
    this.handleDictType();
  },
  methods: {
    // 监听省市选择
    regionPrice(item) {
      console.log(item);
      let { id, label, children } = item;
      let regionIndex = this.regionIndex;
      if (regionIndex === 0) {
        this.regionIndex = 1;
        this.regionTree[0].id = id;
        this.regionTree[0].name = label;
        let childItem = { id: "", name: "", list: children };
        this.$set(this.regionTree, 1, childItem);
      } else {
        this.regionTree[1].id = id;
        this.regionTree[1].name = label;
        this.handleConfirm();
      }
    },
    // 获取省市数据
    getRegion() {
      regionTreeLevel().then((res) => {
        this.regionTree[0].list = res.data;
      });
    },
    // 分类栏左侧并且获取二级名称
    changeClassfiy(e) {
      this.industryId = e.id;
      industryAllTree(this.industryId).then((res) => {
        if (res.code == 200) {
          this.secondList = res.data; // 获取二级名称-三级岗位
        }
      });
    },

    // 获取岗位数据
    changePost(item) {
      // 多选岗位
      console.log(item, "岗位");
      // this.activeList = item.id;
      if (this.activeList.indexOf(item.id) == -1) {
        this.activeList.push(item.id); // 选中
      } else {
        this.activeList.splice(this.activeList.indexOf(item.id), 1); // 取消
      }
    },

    // 数据字典
    handleDictType() {
      // 学历
      getDictType("wxb_education_type").then((res) => {
        if (res.code == 200) {
          this.degreeArr = res.data;
        }
      });
      // 企业规模
      // getDictType("wxb_enterprise_scale").then((res) => {
      //   if (res.code == 200) {
      //     this.expensiveArr = res.data;
      //   }
      // });
    },
    // 获取行业数据一级数据
    handleIndustry() {
      industryTree().then((res) => {
        if (res.code == 200) {
          this.industryList = res.data;
          this.industryId = this.industryList[0]?.id;
          this.changeClassfiy(this.industryList[0]);
        }
      });
    },

    // 选择排序
    handleSort(e) {
      this.sortType = e.value;
    },
    // 触发touchmove方法
    move(e) {
      this.minValue = e.custom.minValue;
      this.maxValue = e.custom.maxValue;

      this.startSalary = e.custom.minValue * 1000; // 薪资范围-起始
      this.endSalary = e.custom.maxValue * 1000; // 薪资范围-结束

      this.salary = null; // 点击滑动到时候取消下面点击范围数据
    },
    // 触发touchstart方法
    down(e) {
      this.minValue = e.custom.minValue;
      this.maxValue = e.custom.maxValue;

      this.startSalary = e.custom.minValue * 1000;
      this.endSalary = e.custom.maxValue * 1000;

      this.salary = null;
    },
    // 触发touchend方法
    up(e) {
      this.minValue = e.custom.minValue;
      this.maxValue = e.custom.maxValue;

      this.startSalary = e.custom.minValue * 1000;
      this.endSalary = e.custom.maxValue * 1000;

      this.salary = null;
    },
    // 薪酬
    changeSalary(index, item) {
      if (this.salary === index) {
        this.salary = null;
        this.startSalary = ''
        this.endSalary = ''
        console.log(this.startSalary, this.endSalary);
      } else {
        this.salary = index;
        this.startSalary = +item.value[0]; // 薪资范围-起始
        this.endSalary = +item.value[1]; // 薪资范围-结束
      }
      this.$nextTick(() => {
        this.minValue = 0;
        this.maxValue = 0;
      });
    },
    // 学历
    changePrice(item) {
      if (this.educationTypes.indexOf(item) == -1) {
        this.educationTypes.push(item); // 选中
      } else {
        this.educationTypes.splice(this.educationTypes.indexOf(item), 1); // 取消
      }
    },
    // 工作经验
    changeWork(item, index) {
      if (this.work === index) {
        this.work = null;
        this.workExperiences = {
          startWorkExperience: null,
          endWorkExperience: null
        };
      } else {
        this.work = index;
        this.workExperiences = {
          startWorkExperience: +item.value[0],
          endWorkExperience: +item.value[1],
        };
      }

    },
    //企业规模
    // changeEnterprise(item) {
    //   if (this.enterpriseScales.indexOf(item) == -1) {
    //     this.enterpriseScales.push(item); // 选中
    //   } else {
    //     this.enterpriseScales.splice(this.enterpriseScales.indexOf(item), 1); // 取消
    //   }
    // },
    // 取消
    handleCancel() {
      this.$emit("handleCancel", false);
    },
    // 确认
    handleConfirm() {
      console.log([this.workExperiences]);
      uni.removeStorageSync('talantIndustryId')
      let obj = {
        city: this.regionTree[1].id,
        industryId: this.activeList, // 岗位id
        sortType: this.sortType, // 排序
        priceValue: this.priceValue,
        startSalary: this.startSalary, // 薪资范围-起始
        endSalary: this.endSalary, // 薪资范围-结束
        educationTypes: this.educationTypes, // 学历
        workExperiences: [this.workExperiences], // 工作经验
      };

      this.$emit("handleConfirm", obj);
    },
  },
};
</script>
<style lang="scss" scoped>
.title-listH {
  width: 100%;
  height: 76rpx;
}

.title-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 72rpx;
  display: flex;
  padding: 4rpx 24rpx 0;
  background: #ffffff;

  .title-item {
    position: relative;
    font-size: 28rpx;
    line-height: 72rpx;
    color: rgba(0, 0, 0, 0.45);
    font-weight: 500;
    padding: 0 16rpx;

    .placeholder-text {
      color: #000000;
    }

    &.active::after {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      content: "";
      width: 20rpx;
      height: 6rpx;
      display: block;
      background: #ff9e24;
      border-radius: 6rpx;
      margin: auto;
    }
  }
}

.dropDown {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;

  >view {
    position: relative;
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: calc(100vh - 300rpx);
    border-radius: 0 0 24rpx 24rpx;

    .classify {
      position: absolute;
      top: 16rpx;
      left: 0;
      width: 100%;

      >view {
        display: flex;
      }

      .left {
        width: 242rpx;
        background: #d8d8d85c;
        color: #00000073;
        overflow: auto;
        height: 480rpx;
        font-size: 26rpx;

        >view {
          width: 100%;
          height: 120rpx;
          line-height: 120rpx;
          text-align: center;
        }

        .active {
          background-color: #fff;
          color: #000;
        }
      }

      .right {
        width: calc(100% - 242rpx);
        overflow: auto;
        font-size: 28rpx;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
        align-content: space-between;
        height: 480rpx;

        .second-item {
          width: 100%;
        }

        .post-name {
          width: 100%;
          font-weight: 600;
          text-align: left;
          padding: 0 20rpx;
          color: #333;
        }

        .post-num {
          width: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: center;
        }

        .post {
          width: auto;
          min-width: 218rpx;
          min-height: 65rpx;
          border-radius: 32rpx;
          background-color: #efefef;
          color: #868686;
          margin: 10rpx;
          font-size: 24rpx;
          color: #000000e0;
          padding: 0 8rpx;
          display: flex;
          align-items: center;
          box-sizing: border-box;

          .label {
            width: 100%;
            text-align: center;
            line-height: 40rpx;
          }
        }

        .active {
          min-width: 218rpx;
          min-height: 65rpx;
          border-radius: 32rpx;
          background-color: #ff9e24;
          color: #fff;
          margin: 10rpx;
          padding: 0 8rpx;
          display: flex;
          align-items: center;
          box-sizing: border-box;
          font-size: 24rpx;

          .label {
            width: 100%;
            text-align: center;
            line-height: 40rpx;
          }
        }
      }
    }
  }

  .cetetory {
    height: 600rpx;
  }

  .sort {
    height: 370rpx;

    >view {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 32rpx;
      padding-right: 50rpx;
      box-sizing: border-box;
      height: 90rpx;
      font-size: 28rpx;
      color: #000000e0;
    }
  }

  .select {
    height: 750rpx;
    width: 100%;
    overflow: hidden;

    >view {
      width: 100%;
      padding: 0 32rpx;
      box-sizing: border-box;
      height: 660rpx;
      overflow: auto;

      .titleText {
        font-size: 28rpx;
        color: #000000e0;
        height: 60rpx;
        line-height: 60rpx;
        margin: 10rpx 0;
      }

      .price {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        >view {
          width: 210rpx;
          height: 64rpx;
          background: #d8d8d85c;
          border-radius: 32rpx;
          text-align: center;
          line-height: 64rpx;
          margin: 8rpx;
          font-size: 24rpx;
          color: #000000e0;
        }

        .active {
          background-color: #ff9e24;
          color: #fff;
        }
      }
    }

    .degree {
      width: 100%;
      // height: 250rpx;
    }
  }

  .btn {
    display: flex;
    width: 100%;
    height: 90rpx;
    font-size: 28rpx;
    background: #fff;
    position: absolute;
    bottom: 0;

    >view {
      flex: 1;
      height: 100%;
      line-height: 92rpx;
      text-align: center;
    }

    .cancel {
      color: #00000073;
    }

    .confirm {
      color: #ff9e24;
    }
  }
}

.slider {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;

  .sliderLeft {
    margin-left: 20rpx;
  }

  .sliderRight {
    margin-right: 50rpx;
  }
}
</style>
